<template>
  <div class="info">
    user/info
    <div v-for="item in msgList" :key="item.id">
      <p>作者:{{ item.msg_name }}</p>
      <p>标题:{{ item.title }}</p>
      <p>副标题:{{ item.sub_title }}</p>
      <div>
        内容:
        <div v-html="item.content"></div>
      </div>
      <p>时间:{{ item.date }}</p>
      <button @click="checkMsg(item.id)">查看详情</button>
    </div>
  </div>
</template>

<script>
import { getMsgApi } from '@/plugins/api'
export default {
  // 服务端获取数据
  async asyncData() {
    const { data } = await getMsgApi()
    console.log(data)
    return {
      msgList: data,
    }
  },
  head() {
    return {
    }
  },
  data() {
    return {
    }
  },
  methods: {
    checkMsg(id) {
      // Nuxt的编程式导航跳转和Vue的编程式导航一样
      this.$router.push('detail?id=' + id)
    },
  },
}
</script>
 
<style lang="less" scoped>
.info {
  width: 50%;
}
// 修改富文本的样式
/deep/ iframe.ql-video {
  width: 100%;
  height: 800px;
}
</style>